<html lang="en">

<head>
    <script src="./d3/d3-4.7.3/d3.js"></script>
</head>

<body>
    <script type="text/javascript" charset="utf-8">
        // rect 4 个重要的属性: x(矩形左上角坐标), y(矩形左上角坐标), width(矩形的宽度), height(矩形的高度)
        // var width = 300,
        //    height = 300;
        // var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
        var svg = d3.select("body").append("svg")
        var dataset = [250, 210, 170, 130, 90]; //数据(表示矩形的宽度)
        var rectHeight = 25; // 每个矩形所占的像素高度(包括空白)
        svg.selectAll("rect").data(dataset)  // 进行数据绑定, 虽然并没有 rect...
            .enter()  // 指定选择集的 enter 部分
            .append("rect")  // 添加足够数量的矩形元素,
        // selectAll().data().enter().append() 有数据, 而没有足够图形元素的时候, 使用此方法可以添加足够的元素
        // 下面给添加好的元素赋属性值
            .attr("x", 20)
            .attr("y", function(d, i) {
                return i * rectHeight;
            })
            .attr("width", function(d) {
                return d;
            })
            .attr("height", rectHeight - 2)
            .attr("fill", "steelblue");
    </script>

</body>

</html>
